<template>
	<view class="m-domain">
		<view class="nav flex-c" @click="$u.route('/pages/index/domain')">
			<view class="nav-l">按领域·咨询</view>
			<u-search disabled placeholder="搜索更多内容与服务" leftPosi='right' :showAction='false'></u-search>
		</view>
		<view class="list  flex" style="flex-wrap: wrap;">
			<view class="list-item" v-for="(item,index) in index_info.field" :key="index" @click="$u.route('/pages/index/domain',{field_id:item.id})" >
				<view class="list-item-img " style="">
					<image class="" style="width: 100%;" :src="$ossurl+ item.image" mode="widthFix">
					</image>
				</view>
				<view class="list-item-text">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "m-domain",
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		}
	}
</script>
<script setup>
	import {
		ref
	} from 'vue'
	import data from '/common/base/data.js'
	const list = ref(data.index_list)
	defineProps(['index_info'])
</script>

<style scoped lang="scss">
	:deep(.u-search__content__input--placeholder) {
		font-size: 24rpx;
	}

	:deep(.uni-input-input) {
		font-size: 24rpx;
	}

	.m-domain {
		background: #ffffff;
		padding: 32rpx 0 32rpx;
		margin-bottom: 26rpx;

		.nav {
			padding: 0 24rpx 0;

			.nav-l {
				flex: 0 0 auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #2B2B2B;
				margin-right: 14rpx;
			}
		}

		.list {
			padding-left: 36rpx;

			.list-item {
				width: 154rpx;
				height: 118rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-right: 20rpx;
				margin-top: 36rpx;

				.list-item-img {
					padding-top: 16rpx;
					margin: 0 auto;
					width: 56rpx;
					height: 76rpx;
				}

				.list-item-text {
					font-family: PingFang SC, PingFang SC;
					font-size: 24rpx;
					color: #666666;
					text-align: center;
				}
			}
		}
	}
</style>